<template>
	<view class="video-container">
		<!-- 视频内容块 -->
		<view class="video-video-bar">
			<!-- 视频 -->
			<video :src="someone_dataset.videoPic" :id="someone_dataset.idName" class="video-video" :autoplay="true"
				:controls="is_controls" :enable-progress-gesture="false" @loadedmetadata="handleLoadedMetadata"
				@timeupdate="handleTimeUpdate" @play="handlePlay" @pause="handlePause" @click="handleControlVideo"
				@fullscreenchange="handleFullScreenChange" />
			<!-- 视频的播放图标 -->
			<image src="../../../static/img/suspend.png" mode="" class="video-video-stop-img"
				v-show="!video_dataset.is_play" @click="handleControlVideo"></image>
		</view>
		<view class="video-other-content flex-center" v-show="!is_controls">
			<slider @change="handleSliderChange" @changing="handleSliderChangimg" class="video-other-content-slider"
				:value="slider_dataset.slider_value" activeColor="#1aad18" block-size="12" />
			<text>{{video_dataset.surplusTime}}</text>
			<text class="uni-video-fullscreen" @click="handleVideoZoomClick"></text>
		</view>
	</view>
</template>

<script>
	import {
		formatSeconds
	} from "../../../utils/getTime.js"
	export default {
		props: ['someone_dataset'],
		data() {
			return {
				video_dataset: {
					is_play: true,
					duration: '0',
					surplusTime: '00:00',
					updateState: false,
				},
				slider_dataset: {
					slider_value: 0,
					update_state: true
				},
				videoContext: Object,
				video_is_all_screen: false,
				is_controls: false
			}
		},
		mounted() {
			this.videoContext = uni.createVideoContext(this.someone_dataset.idName, this)
			let videoContextArr = this.$store.state.videoContextArr
			videoContextArr.push(this.videoContext)
			this.$store.commit('sendVideoContext', videoContextArr)
			this.$store.commit('saveCurrentVideoContext', videoContextArr[0])
		},
		methods: {
			// 自定义控制播放暂停
			handleControlVideo(e) {
				if (this.video_dataset.is_play) {
					this.videoContext.pause()
				} else {
					this.videoContext.play()
				}
			},
			// video加载完成时触发
			handleLoadedMetadata(e) {
				let duration = e.detail.duration;
				this.video_dataset.surplusTime = formatSeconds(duration);
				this.video_dataset.duration = duration;
			},
			// video播放进度变化时触发
			handleTimeUpdate(e) {
				let duration = e.detail.duration;
				let current = e.detail.currentTime
				let surplus = duration - current
				if (this.slider_dataset.update_state) {
					this.slider_dataset.slider_value = current / duration * 100;
				}
				// 剩余时长
				this.video_dataset.surplusTime = formatSeconds(surplus);
			},
			// video播放触发
			handlePlay() {
				this.video_dataset.is_play = true
			},
			// video暂停触发
			handlePause() {
				this.video_dataset.is_play = false
			},

			// 进度条变化完之后触发
			handleSliderChange(e) {
				let duration = this.video_dataset.duration
				let second = e.detail.value / 100 * duration
				if (duration) {
					this.videoContext.seek(second)
					this.videoContext.play()
					this.slider_dataset.slider_value = e.detail.value
					this.slider_dataset.update_state = true
				}
			},
			// 进度条拖动时触发
			handleSliderChangimg() {
				this.slider_dataset.update_state = false;
			},
			// video全屏
			handleVideoZoomClick() {
				this.video_is_all_screen ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen()
			},
			// video进入、退出全屏触发
			handleFullScreenChange(e) {
				let video_is_all_screen = e.detail.fullScreen
				this.video_is_all_screen = video_is_all_screen
				if (video_is_all_screen) {
					this.is_controls = true
				} else {
					this.is_controls = false
				}
			}
		}
	}
</script>

<style lang="scss">
	.video-container {
		height: 100%;

		// 视频块 定位到全屏
		.video-video-bar {
			height: 100%;

			.video-video {
				width: 100%;
				height: 100%;
			}

			// 播放三角形按钮
			.video-video-stop-img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 70rpx;
				height: 70rpx;
			}
		}

		.video-other-content {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;

			.video-other-content-slider {
				width: 100%;
			}
		}
	}
</style>